import React from 'react';
import {history} from 'umi';
import {Descriptions, Typography} from '@douyinfe/semi-ui';
import {IconList, IconPriceTag} from '@douyinfe/semi-icons';
import adminStyle from './index.less';

const {Text} = Typography;
export default class Admin extends React.Component {
    constructor(props: any) {
        super(props);
        this.state = {
            userName: '阿贤',
            data: [
                {key: '网站访问数量', value: '1,480,000'},
                {key: '书签总数', value: '1,480,000'},
                {key: '用户总数', value: '1,480,000'},
            ],
            feature: [
                {
                    name: '分类管理',
                    path: '/admin/classify',
                    icon: <IconPriceTag style={{fontSize: '1.5rem'}}/>,
                },
                {
                    name: '视频列表',
                    path: '/admin/video',
                    icon: <IconList style={{fontSize: '1.5rem'}}/>,
                },
            ],
        };
    }

    goFeature(item: any) {
        // const { user, signin } = useModel('updateNav');
        history.push(item.path);
        this.forceUpdate();
    }

    render() {
        const style = {
            backgroundColor: 'var(--semi-color-bg-2)',
            borderRadius: '4px',
            padding: '10px',
            marginRight: '20px',
            width: '700px',
        };
        const {userName, data, feature}: any = this.state;
        return (
            <div
                className={[adminStyle.admin_container, 'content_container'].join(' ')}
            >
                <div className={adminStyle.welcome}>Hi~ ,{userName}</div>
                <Descriptions size="large" data={data} row style={style}/>
                <h2 className={adminStyle.title}>功能模块</h2>
                <div className={adminStyle.feature_container}>
                    {feature.map((item: any, index: number) => (
                        <div
                            onClick={() => {
                                this.goFeature(item);
                            }}
                            className={adminStyle.feature_item}
                            key={index}
                        >
                            <div className={adminStyle.icon_style}> {item.icon}</div>
                            <div className={adminStyle.feature_title}>{item.name}</div>
                        </div>
                    ))}
                </div>
                <h1
                    style={{
                        fontSize: '2rem',
                        position: 'absolute',
                        bottom: '2rem',
                        right: '2rem',
                    }}
                >
                    化繁为简，简而不凡
                </h1>
                {/*<CardGroup spacing={10}>*/}
                {/*  {*/}
                {/*    new Array(8).fill(null).map((v,idx)=>(*/}
                {/*      <Card*/}
                {/*        key={idx}*/}
                {/*        shadows='hover'*/}
                {/*        title='Card title'*/}
                {/*        headerLine={false}*/}
                {/*        style={{ width:260 }}*/}
                {/*        headerExtraContent={*/}
                {/*          <Text link>*/}
                {/*            More*/}
                {/*          </Text>*/}
                {/*        }*/}
                {/*      >*/}
                {/*        <Text>Card content</Text>*/}
                {/*      </Card>*/}
                {/*    ))*/}
                {/*  }*/}
                {/*</CardGroup>*/}
            </div>
        );
    }
}
